<template>
  <el-col :span="6" class="nav-wrapper">
    <div class="header-section">
      <h3 class="nav-title">管理后台</h3>
    </div>
    <el-menu 
      default-active="1" 
      class="el-menu-vertical-demo slim-menu"
      :collapse-transition="false"
    >
      <el-menu-item index="1" class="menu-item">
        <i class="el-icon-s-custom icon-style"></i>
        <router-link class="link" to='/admin/alumnus'>校友管理</router-link>
      </el-menu-item>
      <el-menu-item index="2" class="menu-item">
        <i class="el-icon-document icon-style"></i>
        <router-link class="link" to='/admin/act'>活动管理</router-link>
      </el-menu-item>
      <el-menu-item class="menu-item logout-item">
        <i class="el-icon-switch-button icon-style"></i>
        <span class="link" @click="adminLogout">退出登录</span>
      </el-menu-item>
    </el-menu>
  </el-col>
</template>


<script>
export default {
  data() {
    return {
      
    }
  },

  methods: {
    adminLogout() {
      this.$store.dispatch('user/logout')
      this.$router.push('/login')
    }
  }
}
</script>

<style scoped>
.nav-wrapper {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 1000;
  width: 260px !important;
  height: 100vh;
  background: #f5f7fa;
  box-shadow: 2px 0 12px rgba(0, 0, 0, 0.08);
  transition: width 0.3s ease;
}

.header-section {
  padding: 24px 30px;
  border-bottom: 1px solid #e6ebf5;
}

.nav-title {
  margin: 0;
  font-size: 1.4rem;
  color: #303133;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.slim-menu {
  border-right: none;
  padding: 16px 0;
}

.menu-item {
  height: 48px;
  margin: 4px 12px;
  border-radius: 8px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.menu-item:hover {
  background-color: rgba(64, 158, 255, 0.08);
}

.menu-item.is-active {
  background-color: rgba(64, 158, 255, 0.1);
  border-left: 3px solid #409EFF;
}

.icon-style {
  font-size: 1.2rem;
  color: #606266;
  margin-right: 12px;
}

.link {
  text-decoration: none;
  color: #606266;
  font-size: 0.95rem;
  font-weight: 500;
  transition: color 0.2s;
}

.link:hover {
  color: #409EFF;
}

.logout-item .link:hover {
  color: #f56c6c;
}

/* 响应式优化 */
@media (max-width: 992px) {
  .nav-wrapper {
    width: 200px !important;
  }
  
  .nav-title {
    font-size: 1.2rem;
    padding-left: 20px;
  }
  
  .menu-item {
    margin: 4px 8px;
  }
  
  .icon-style {
    margin-right: 8px;
  }
}

@media (max-width: 768px) {
  .nav-wrapper {
    width: 56px !important;
    overflow: hidden;
    transition: width 0.3s;
  }
  
  .nav-wrapper:hover {
    width: 200px !important;
  }
  
  .header-section {
    padding: 16px;
  }
  
  .nav-title {
    display: none;
  }
  
  .link {
    font-size: 0;
    opacity: 0;
    transition: opacity 0.3s;
  }
  
  .nav-wrapper:hover .link {
    font-size: 0.95rem;
    opacity: 1;
  }
}
</style>